import React, { useState, memo, useEffect } from 'react';
import { Row, Col, Checkbox } from 'antd';
import styles from './index.less';
import classnames from 'classnames';
import Toolbar from '@/components/Toolbar';
import { ImportOutlined, SaveOutlined, FileAddOutlined, DeleteOutlined } from '@ant-design/icons';
import EmptyCenter from '@/components/EmptyCenter';
import IconFont from '@/components/IconFont';
import { useUnmount } from '@umijs/hooks';
import useModel from '../../useModel.js';

export default memo(props => {
  const {
    state: { indeterminate, checkedList, checkAll, selectedRow, data = [] },
    run,
    remove,
    getXmlContent,
    setXmlContents,
    clearAll,
    add,
    setState,
  } = useModel(model => [
    model.state.indeterminate,
    model.state.checkedList,
    model.state.checkAll,
    model.state.selectedRow,
    model.state.data,
  ]);
  const [popconfirmVisible, setPopconfirmVisible] = useState(false);

  useUnmount(() => {
    clearAll();
  });

  useEffect(() => {
    if (localStorage.getItem('deviceType')) {
      run({ fsuTypeId: JSON.parse(localStorage.getItem('deviceType'))?.id });
    }
  }, []);

  //
  const onCheckAllChange = e => {
    setState({
      checkedList: e.target.checked ? data : [],
      indeterminate: false,
      checkAll: e.target.checked,
    });
  };

  const CheckAll = () => {
    return (
      <Checkbox indeterminate={indeterminate} onChange={onCheckAllChange} checked={checkAll}>
        全选
      </Checkbox>
    );
  };
  let toolbar = [
    {
      type: 'button',
      theme: 'white',
      className: styles['check-all'],
      icon: <CheckAll />,
    },
    {
      type: 'button',
      name: '新增',
      theme: 'blue',
      icon: <IconFont type={'iconxinzeng'} />,
      onClick: () => {
        add();
      },
    },
    {
      type: 'popconfirm',
      icon: <IconFont type={'iconshanchu'} />,
      name: '删除',
      disabled: checkedList[0] ? false : true,
      theme: 'white',
      visible: popconfirmVisible,
      onConfirm: () => {
        remove({
          keys: checkedList.map(item => {
            return item.id;
          }),
        });
      },
      onVisibleChange: visible => {
        if (!checkedList[0]) return;
        if (!visible) {
          setPopconfirmVisible(visible);
          return;
        }
        if (checkedList[0]) {
          setPopconfirmVisible(visible);
        }
      },
    },
  ];
  return (
    <div className={styles['message-list-wrap']}>
      <Toolbar modules={toolbar} leftSpan={24} className={styles['toolbar-wrap']} />
      <div className={styles['message-list-ct']} style={!data[0] ? { height: '100%' } : null}>
        {!data[0] && <EmptyCenter />}
        {data[0] &&
          data.map((item, index) => {
            const checked = checkedList.filter(app => {
              return app.id === item.id;
            });

            return (
              <Row
                className={classnames(
                  styles['message-list'],
                  selectedRow.id === item.id && styles['selected'],
                )}
                key={index.toString(36) + index}
              >
                <Col span={18}>
                  <Checkbox
                    checked={checked[0] ? true : false}
                    onChange={e => {
                      const list = [...checkedList];
                      let len = data.length;
                      if (e.target.checked) {
                        let newList = [...list, item];
                        setState({
                          checkedList: newList,
                          indeterminate: newList.length < len ? true : false,
                          checkAll: newList.length === len,
                        });
                      } else {
                        const rest = list.filter(app => {
                          return app.id !== item.id;
                        });
                        setState({
                          checkedList: rest,
                          indeterminate: rest[0] ? true : false,
                          checkAll: false,
                        });
                      }
                    }}
                  >
                    {item.name}
                  </Checkbox>
                </Col>
                <Col span={6}>
                  <span
                    className={styles['edit']}
                    onClick={e => {
                      setState({
                        selectedIndex: index,
                        selectedRow: item,
                        messageName: item.name,
                        msgType: item.msgType,
                        isAddMode: false,
                      });
                      getXmlContent(item.id);
                    }}
                  >
                    编辑
                  </span>
                </Col>
              </Row>
            );
          })}
      </div>
    </div>
  );
});
